import React, { Component } from 'react';
import "../styles/Kecheng.scss"
import { NavBar, Space,SearchBar,Footer } from 'antd-mobile'
import { SearchOutline, MoreOutline } from 'antd-mobile-icons'
import * as service from '../api/index'

class Kecheng extends Component {
    constructor(props) {
        super(props)
        this.state = {
            right: (
                <div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <SearchOutline />
                        <MoreOutline />
                    </Space>
                </div>
            ),
            kecheng:[]

        }
    }
    async componentDidMount(){
        var res=await service.user_kecheng()
        this.setState({kecheng:res.data})
       }
    render() {
        return (
            <div className='kecheng'>
                <NavBar backArrow={false} right={this.state.right}>
                    热门课程
                </NavBar>
                <div className="nei">
                <SearchBar placeholder='搜索课程/头条/活动' onFocus={()=>{this.props.history.push('/sousujg')}}/>
                <div className="han1">
                {
              this.state.kecheng.map((item,index)=>{
                return (
                  <div className="item" key={index} onClick={()=>{this.props.history.push('/kechengxx')}}>
                    <div className="d1">
                      <div>{item.text}</div>
                      <div className='text1'>{item.text1}</div>
                      <span><img src={item.pic} alt="" /></span>
                    </div>
                    <div className="d2">
                    <div className='name'>{item.name}</div>
                    <div className='jiage'>
                        <div>
                        <span>¥</span>{item.jiage}
                        </div>
                        <div className='xue'>{item.xue}</div>
                    </div>
                    </div>
                  </div>
                )
              })
            }
                </div>
                <Footer label='我是有底线的'></Footer>
                </div>
            </div>
        );
    }
}

export default Kecheng;